<template>
	<view class="product_introduce_card_wrap">
		<wd-card>
			<view class="product_introduce_card_box">
				<view class="header_box">
					<text class="title">产品中心</text>
					<view class="add_icon" @click="addProductIntroduceClick">
						<wd-icon name="add" size="18px" custom-style="position: relative;left: 50%;transform: translateX(-50%);" color="#f1f1f1"></wd-icon>
					</view>
				</view>

				<view class="product_introduce_content_box" v-if="cardStore.productIntroduceList.length != 0">
					<view class="product_introduce_item_box" v-for="(pil, indexPIL) in cardStore.productIntroduceList" :key="indexPIL">
						<div class="left_box">
							<text>{{ indexPIL + 1 }}</text>
						</div>
						<div class="center_box">
							<div class="top_box">
								<wd-input type="text" style="text-align: left" custom-input-class="name_input" v-model="pil.introduceTitle" placeholder="请输入标题" />
							</div>
							<div class="bottom_box">
								<wd-input type="text" custom-input-class="url_input" v-model="pil.introduceUrl" placeholder="请输入链接地址" />
							</div>
						</div>
						<div class="right_box">
							<wd-icon
								name="delete"
								custom-style="position:absolute;top:50%;transform:translateY(-50%);"
								color="#ff0c10"
								size="22px"
								@click="delProductIntroduceClick(pil,indexPIL)"
							></wd-icon>
						</div>
					</view>
				</view>

				<view v-else class="not_data_box">
					<text>请添加产品信息</text>
				</view>
			</view>
		</wd-card>

		<!-- 弹窗盒子 -->
		<wd-message-box />
	</view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
	name: 'ProductIntroduceCard'
})
</script>
<script setup>
import { useMessage } from '@/uni_modules/wot-design-uni'
import { useCardStore } from '@/stores/card.js'

const cardStore = useCardStore()

const message = useMessage()

// 产品介绍列表
// const productIntroduceList = ref([
// 	{
// 		productIntroduceId: 1,
// 		introduceTitle: 'LH-C660便携式水质检测仪',
// 		introduceUrl: 'https://www.lohand.com/productinfo/2522207.html',
// 		companyId:cardStore.currentCompanyId
// 	},
// 	{
// 		productIntroduceId: 2,
// 		introduceTitle: 'XC-200 四孔便携式消解仪',
// 		introduceUrl: 'https://www.lohand.com/productinfo/2545539.html',
// 		companyId: cardStore.currentCompanyId
// 	},
// 	{
// 		productIntroduceId: 3,
// 		introduceTitle: 'LH-Z10A型便携式浊度仪',
// 		introduceUrl: 'https://www.lohand.com/productinfo/2545534.html',
// 		companyId: cardStore.currentCompanyId
// 	},
// 	{
// 		productIntroduceId: 4,
// 		introduceTitle: 'LH-P210型便携式',
// 		introduceUrl: 'https://www.lohand.com/productinfo/2545530.html',
// 		companyId:cardStore.currentCompanyId
// 	}
// ])

// 删除产品介绍点击事件
const delProductIntroduceClick = (pil,indexPIL) => {
	console.log('删除',pil);
	message
		.confirm({
			msg: `是否删除-产品(${indexPIL+1})`,
			title: '提示'
		})
		.then(() => {
			cardStore.productIntroduceList = cardStore.productIntroduceList.filter((itemP) => {
				return itemP.productIntroduceId != pil.productIntroduceId
			})
			uni.showToast({
				title: '删除成功',
				mask: true,
				icon: 'none',
				duration: 1000
			})
		})
		.catch(() => {})
}

// 添加产品介绍点击事件
const addProductIntroduceClick = () => {
	// 判断是否超过最大限制
	if(cardStore.productIntroduceList.length >= 2){
		uni.showToast({
			title:"最多添加2个产品",
			icon:"none",
			mask:true,
			duration:1200
		})
	}else{
		// 判断是否为空
		if(cardStore.productIntroduceList.length != 0){
			// 判断上一个产品介绍是否填写完整
			console.log('ardStore.productIntroduceList',cardStore.productIntroduceList);
			let lastD = cardStore.productIntroduceList[cardStore.productIntroduceList.length - 1]
			if (lastD.introduceTitle != '' && lastD.introduceUrl != '') {
				cardStore.productIntroduceList.push({
					introduceTitle: '',
					introduceUrl:'',
					companyId: cardStore.currentCompanyId
				})
			} else {
				uni.showToast({
					title: `请将上一个填写完整`,
					icon: 'none',
					mask: true,
					duration: 1000
				})
			}
		}else{
			cardStore.productIntroduceList.push({
				introduceTitle: '',
				introduceUrl:'',
				companyId: cardStore.currentCompanyId
			})
		}
	}
	

}


onMounted(()=>{
	console.log('cardStore.productIntroduceList',cardStore.productIntroduceList);
})
</script>

<style lang="scss" scoped>
.product_introduce_card_box {
	width: 100%;
	.header_box {
		width: 100%;
		padding: 8px 4px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		text {
			letter-spacing: 1px;
			font-size: 16px;
		}

		.add_icon {
			width: 28px;
			height: 28px;
			line-height: 28px;
			background-color: rgba(0, 0, 0, 0.45);
			border-radius: 50%;
			box-sizing: border-box;
			// padding: 20px;
		}
	}

	// 产品介绍内容
	.product_introduce_content_box {
		width: 100%;
		// min-height: 60px;
		padding: 8px 0px 8px 0px;
		// border: 1px solid red;
		display: flex;
		flex-direction: column;

		.product_introduce_item_box {
			width: 100%;
			height: 80px;
			// border: 1px solid red;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid rgba(#ccc, 0.4);
			border-top: 1px solid rgba(#ccc, 0.4);
			margin-bottom: 8px;
			box-sizing: border-box;
			overflow: hidden;

			.left_box {
				width: 36px;
				height: 100%;
				text-align: center;
				line-height: 80px;
				// border: 1px solid red;
				background-color: #dee4ea;
			}

			.center_box {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				padding-right: 10px;
				box-sizing: border-box;

				.top_box {
					height: 50%;
					.wd-input {
						height: 100% !important;
						text-align: left !important;
					}
					.name_input {
						text-align: left !important;
					}
				}

				.bottom_box {
					height: 50%;
					.url_input {
						height: 100% !important;
						text-align: left !important;
					}
				}
			}

			.right_box {
				position: relative;
				width: 24px;
				height: 100%;
				// border: 1px solid blue;
			}
		}
	}

	.not_data_box {
		padding: 20px 0px 30px 0px;
		text-align: center;
		text {
			letter-spacing: 2px;
			color: #686868;
		}
	}
}

// :deep(.add_icon){
// 	.wd-icon{
// 		position: relative !important;
// 		left: 50% !important;
// 	}
// }

// :deep(.wd-input__inner){
// 	width: 100vw !important;
// 	flex: none !important;
// 	text-align: center !important;
// }

// ::v-deep .wd-input__inner{
// 	flex: none !important;
// 	text-align: center !important;
// }
</style>
